<template>
  <div class="device-report">
    <!-- 左侧树形结构区域 -->
    <div class="left-tree-panel">
      <div class="tree-header">
        <h4>
          <i class="el-icon-office-building"></i>
          楼栋用房分类
        </h4>
      </div>
      <div class="tree-search">
        <el-input 
          v-model="treeSearchText" 
          placeholder="请输入楼栋内容" 
          size="small" 
          clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="tree-container">
        <el-tree
          :data="treeData"
          :props="treeProps"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          :expand-on-click-node="false"
          :default-expand-all="true"
          :highlight-current="true"
          @node-click="handleNodeClick"
          class="custom-tree">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="tree-node-label">
              <i :class="getNodeIcon(data)" class="tree-node-icon"></i>
              {{ node.label }}
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    
    <!-- 右侧内容区域 -->
    <div class="right-content-panel">
      <!-- Tab切换 -->
      <div class="tab-container">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="custom-tabs">
          <el-tab-pane label="电表结算流水统计" name="electric-settlement">
            <template slot="label">
              <span class="tab-label">
                <i class="el-icon-lightning"></i>
                电表结算流水统计
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane label="水表结算流水统计" name="water-settlement">
            <template slot="label">
              <span class="tab-label">
                <i class="el-icon-water-cup"></i>
                水表结算流水统计
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane label="流体表结算流水统计" name="fluid-settlement">
            <template slot="label">
              <span class="tab-label">
                <i class="el-icon-cpu"></i>
                流体表结算流水统计
              </span>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 搜索筛选区 -->
      <div class="filter-container">
        <el-form :inline="true" :model="filterForm" class="filter-form">
          <el-form-item label="按日:">
            <el-button 
              :type="filterForm.timeType === 'day' ? 'primary' : 'default'"
              size="small"
              @click="setTimeType('day')"
            >
              按日
            </el-button>
          </el-form-item>
          <el-form-item label="按月:">
            <el-button 
              :type="filterForm.timeType === 'month' ? 'primary' : 'default'"
              size="small"
              @click="setTimeType('month')"
            >
              按月
            </el-button>
          </el-form-item>
          <el-form-item label="按年:">
            <el-button 
              :type="filterForm.timeType === 'year' ? 'primary' : 'default'"
              size="small"
              @click="setTimeType('year')"
            >
              按年
            </el-button>
          </el-form-item>
          <el-form-item label="日期:">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="—"
              start-placeholder="2025-01"
              end-placeholder="2025-07"
              value-format="yyyy-MM-dd"
              class="date-picker"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="房间信息:">
            <el-input 
              v-model="filterForm.roomInfo" 
              placeholder="请输入"
              clearable
              class="filter-input"
            ></el-input>
          </el-form-item>
          <el-form-item label="电表表号:">
            <el-select 
              v-model="filterForm.meterNumber" 
              placeholder="全部"
              clearable
              class="filter-select"
            >
              <el-option label="全部" value=""></el-option>
              <el-option label="表号001" value="001"></el-option>
              <el-option label="表号002" value="002"></el-option>
              <el-option label="表号003" value="003"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchData">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 操作按钮区 -->
      <div class="action-container">
        <div class="action-buttons">
          <el-button type="success" icon="el-icon-document" @click="exportExcel">字段显示设置</el-button>
          <el-button type="primary" icon="el-icon-printer" @click="printReport">日期汇总导出</el-button>
          <el-button type="info" icon="el-icon-download" @click="downloadReport">电表汇总导出</el-button>
          <el-button type="warning" icon="el-icon-upload" @click="uploadReport">导出明细</el-button>
        </div>
      </div>
      <!-- 数据表格 -->
      <div class="table-container">
        <div class="table-header">
          <div class="table-title">
            <i class="el-icon-tickets"></i>
            设备报表数据
          </div>
        </div>
        <el-table 
          :data="tableData" 
          border 
          style="width: 100%"
          :header-cell-style="headerCellStyle"
          class="custom-table"
          v-loading="loading"
          element-loading-text="加载中..."
          :row-style="{backgroundColor: '#fff'}"
        >
        <el-table-column prop="usageDate" label="用电日期" width="140" align="center"></el-table-column>
        <el-table-column prop="roomInfo" label="房间信息" width="120" align="center"></el-table-column>
        <el-table-column prop="tenantInfo" label="业主信息" width="120" align="center"></el-table-column>
        <el-table-column prop="phoneNumber" label="电话号码" width="140" align="center"></el-table-column>
        <el-table-column prop="meterNumber" label="电表表号" width="120" align="center"></el-table-column>
        <el-table-column prop="meterModel" label="电表倍率" width="100" align="center"></el-table-column>
        <el-table-column prop="startReading" label="起初电量(kwh)" width="140" align="center">
          <template slot-scope="scope">
            <span class="energy-value">{{ scope.row.startReading }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endReading" label="期末电量(kwh)" width="140" align="center">
          <template slot-scope="scope">
            <span class="energy-value">{{ scope.row.endReading }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="usageAmount" label="用电量(kwh)" width="120" align="center">
          <template slot-scope="scope">
            <span class="usage-value">{{ scope.row.usageAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="总" width="80" align="center">
          <template slot-scope="scope">
            <span class="total-value">{{ scope.row.totalAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="peakAmount" label="尖" width="80" align="center">
          <template slot-scope="scope">
            <span class="peak-value">{{ scope.row.peakAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="valleyAmount" label="谷" width="80" align="center">
          <template slot-scope="scope">
            <span class="valley-value">{{ scope.row.valleyAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="flatAmount" label="平" width="80" align="center">
          <template slot-scope="scope">
            <span class="flat-value">{{ scope.row.flatAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalCost" label="申核状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag 
              size="small" 
              :type="scope.row.auditStatus === '是' ? 'success' : 'warning'"
            >
              {{ scope.row.auditStatus }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="mt-4"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 字段显示设置弹窗 -->
    <el-dialog
      title="字段显示设置"
      :visible.sync="showFieldDialog"
      width="600px"
      class="custom-dialog"
    >
      <div class="field-dialog-content">
        <div class="field-tips">
          <el-alert
            title="请选择要显示的字段，拖拽可调整字段顺序"
            type="info"
            :closable="false"
            show-icon
          >
          </el-alert>
        </div>
        <div class="field-list">
          <el-checkbox-group v-model="selectedFields">
            <div class="field-item" v-for="field in availableFields" :key="field.key">
              <el-checkbox :label="field.key">{{ field.label }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showFieldDialog = false">取消</el-button>
        <el-button @click="resetFields">重置</el-button>
        <el-button type="primary" @click="saveFieldSettings">确定</el-button>
      </div>
    </el-dialog>
    <!-- 导出设置弹窗 -->
    <el-dialog
      title="导出设置"
      :visible.sync="showExportDialog"
      width="500px"
      class="custom-dialog"
    >
      <div class="export-dialog-content">
        <el-form :model="exportForm" label-width="120px">
          <el-form-item label="导出格式:">
            <el-radio-group v-model="exportForm.format">
              <el-radio label="excel">Excel格式</el-radio>
              <el-radio label="pdf">PDF格式</el-radio>
              <el-radio label="csv">CSV格式</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="导出范围:">
            <el-radio-group v-model="exportForm.range">
              <el-radio label="current">当前页数据</el-radio>
              <el-radio label="all">全部数据</el-radio>
              <el-radio label="selected">选中数据</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="文件名称:">
            <el-input v-model="exportForm.filename" placeholder="请输入文件名"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showExportDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmExport" :loading="exporting">
          {{ exporting ? '导出中...' : '开始导出' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import deviceReportMock from '@/api/mock/deviceReport'
export default {
  name: 'DeviceReport',
  data() {
    return {
      activeTab: 'electric-settlement',
      loading: false,
      exporting: false,
      tableData: [],
      allData: [],
      filteredData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      filterForm: {
        timeType: 'day',
        dateRange: ['2025-01-01', '2025-07-31'],
        roomInfo: '',
        meterNumber: ''
      },
      // 树形结构相关数据
      treeSearchText: '',
      treeData: [
        {
          id: 'root',
          label: '楼栋用房分类',
          type: 'root',
          children: [
            {
              id: 'dormitory',
              label: '宿舍',
              type: 'building',
              children: [
                {
                  id: 'building_a',
                  label: 'A栋',
                  type: 'floor',
                  children: [
                    { id: 'room_101', label: '101', type: 'room' },
                    { id: 'room_102', label: '102', type: 'room' },
                    { id: 'room_103', label: '103', type: 'room' },
                    { id: 'room_104', label: '104', type: 'room' }
                  ]
                }
              ]
            },
            {
              id: 'second_floor',
              label: '二层',
              type: 'building',
              children: [
                {
                  id: 'building_b',
                  label: 'B栋',
                  type: 'floor',
                  children: [
                    { id: 'room_201', label: '201', type: 'room' },
                    { id: 'room_202', label: '202', type: 'room' },
                    { id: 'room_203', label: '203', type: 'room' }
                  ]
                }
              ]
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label'
      },
      selectedNode: null,
      showFieldDialog: false,
      showExportDialog: false,
      selectedFields: [
        'usageDate', 'roomInfo', 'tenantInfo', 'phoneNumber', 
        'meterNumber', 'meterModel', 'startReading', 'endReading',
        'usageAmount', 'totalAmount', 'peakAmount', 'valleyAmount',
        'flatAmount', 'auditStatus'
      ],
      availableFields: [
        { key: 'usageDate', label: '用电日期' },
        { key: 'roomInfo', label: '房间信息' },
        { key: 'tenantInfo', label: '业主信息' },
        { key: 'phoneNumber', label: '电话号码' },
        { key: 'meterNumber', label: '电表表号' },
        { key: 'meterModel', label: '电表倍率' },
        { key: 'startReading', label: '起初电量(kwh)' },
        { key: 'endReading', label: '期末电量(kwh)' },
        { key: 'usageAmount', label: '用电量(kwh)' },
        { key: 'totalAmount', label: '总' },
        { key: 'peakAmount', label: '尖' },
        { key: 'valleyAmount', label: '谷' },
        { key: 'flatAmount', label: '平' },
        { key: 'auditStatus', label: '申核状态' }
      ],
      exportForm: {
        format: 'excel',
        range: 'current',
        filename: '设备报表_' + new Date().toISOString().slice(0, 10)
      },
      headerCellStyle: {
        backgroundColor: '#f8f9fa',
        color: '#495057',
        fontWeight: 'bold',
        textAlign: 'center'
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      setTimeout(() => {
        const response = deviceReportMock
        this.allData = response.msg.list // 添加allData
        this.filteredData = [...this.allData] // 添加filteredData
        this.updateTableData() // 调用updateTableData
        this.loading = false
      }, 500)
    },
    updateTableData() { // 添加updateTableData方法
      this.total = this.filteredData.length
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      this.tableData = this.filteredData.slice(start, end)
    },
    handleTabClick(tab) {
      console.log("切换到:", tab.name)
      this.loadData()
    },
    setTimeType(type) {
      this.filterForm.timeType = type
      this.searchData()
    },
    searchData() {
      this.currentPage = 1
      let dataToFilter = this.allData;

      // Apply tree filtering if a node is selected
      if (this.selectedNode) {
        if (this.selectedNode.type === 'room') {
          dataToFilter = dataToFilter.filter(item => 
            item.roomInfo.includes(this.selectedNode.label)
          );
        } else if (this.selectedNode.type === 'floor') {
          const roomNumbers = this.getRoomNumbersByFloor(this.selectedNode);
          dataToFilter = dataToFilter.filter(item => 
            roomNumbers.some(roomNum => item.roomInfo.includes(roomNum))
          );
        } else if (this.selectedNode.type === 'building') {
          const roomNumbers = this.getRoomNumbersByBuilding(this.selectedNode);
          dataToFilter = dataToFilter.filter(item => 
            roomNumbers.some(roomNum => item.roomInfo.includes(roomNum))
          );
        }
      }

      // Apply keyword filtering
      if (this.filterForm.roomInfo.trim()) {
        dataToFilter = dataToFilter.filter(item => 
          item.roomInfo.includes(this.filterForm.roomInfo) ||
          item.tenantInfo.includes(this.filterForm.roomInfo) // Assuming tenantInfo is equivalent to userId
        );
      }

      // Apply meter number filtering
      if (this.filterForm.meterNumber) {
        dataToFilter = dataToFilter.filter(item => 
          item.meterNumber === this.filterForm.meterNumber
        );
      }

      this.filteredData = dataToFilter;
      this.updateTableData();
    },
    resetFilter() {
      this.filterForm = {
        timeType: "day",
        dateRange: ["2025-01-01", "2025-07-31"],
        roomInfo: "",
        meterNumber: ""
      }
      this.selectedNode = null; // Reset selected tree node
      this.filteredData = [...this.allData]; // Reset filtered data
      this.currentPage = 1; // Reset current page
      this.updateTableData(); // Update table data
      this.$refs.tree.setCurrentKey(null); // Clear tree selection
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1 // 重置当前页
      this.updateTableData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.updateTableData()
    },
    // 树形结构相关方法
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getNodeIcon(data) {
      const iconMap = {
        root: "el-icon-office-building",
        building: "el-icon-house",
        floor: "el-icon-menu",
        room: "el-icon-location"
      }
      return iconMap[data.type] || "el-icon-folder"
    },
    handleNodeClick(data) {
      this.selectedNode = data
      this.currentPage = 1

      if (data.type === "room") {
        // 根据房间号过滤数据
        this.filteredData = this.allData.filter(item =>
          item.roomInfo.includes(data.label)
        )
      } else if (data.type === "floor") {
        // 根据楼栋过滤数据
        const roomNumbers = this.getRoomNumbersByFloor(data)
        this.filteredData = this.allData.filter(item =>
          roomNumbers.some(roomNum => item.roomInfo.includes(roomNum))
        )
      } else if (data.type === "building") {
        // 根据建筑过滤数据
        const roomNumbers = this.getRoomNumbersByBuilding(data)
        this.filteredData = this.allData.filter(item =>
          roomNumbers.some(roomNum => item.roomInfo.includes(roomNum))
        )
      } else {
        // 显示所有数据
        this.filteredData = [...this.allData]
      }

      this.updateTableData()
    },
    getRoomNumbersByFloor(floorData) {
      const roomNumbers = []
      if (floorData.children) {
        floorData.children.forEach(room => {
          if (room.type === "room") {
            roomNumbers.push(room.label)
          }
        })
      }
      return roomNumbers
    },
    getRoomNumbersByBuilding(buildingData) {
      const roomNumbers = []
      if (buildingData.children) {
        buildingData.children.forEach(floor => {
          if (floor.children) {
            floor.children.forEach(room => {
              if (room.type === "room") {
                roomNumbers.push(room.label)
              }
            })
          }
        })
      }
      return roomNumbers
    },
    exportExcel() {
      this.showFieldDialog = true
    },
    printReport() {
      this.exportForm.filename = '日期汇总报表_' + new Date().toISOString().slice(0, 10)
      this.showExportDialog = true
    },
    downloadReport() {
      this.exportForm.filename = '电表汇总报表_' + new Date().toISOString().slice(0, 10)
      this.showExportDialog = true
    },
    uploadReport() {
      this.exportForm.filename = '设备报表明细_' + new Date().toISOString().slice(0, 10)
      this.showExportDialog = true
    },
    resetFields() {
      this.selectedFields = this.availableFields.map(field => field.key)
    },
    saveFieldSettings() {
      this.$message.success('字段设置已保存')
      this.showFieldDialog = false
    },
    confirmExport() {
      this.exporting = true
      setTimeout(() => {
        this.$message.success('导出成功')
        this.exporting = false
        this.showExportDialog = false
      }, 2000)
    }
  }
}
</script>
<style scoped>
/* 主容器样式 */
.device-report {
  display: flex;
  height: calc(100vh - 84px);
  background: #f5f7fa;
}
/* 左侧树形结构面板 */
.left-tree-panel {
  width: 280px;
  background: white;
  border-radius: 8px;
  margin-right: 16px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.tree-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
  border-radius: 8px 8px 0 0;
}

.tree-header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-header i {
  color: #409eff;
  font-size: 18px;
}

.tree-search {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.tree-container {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
}

.custom-tree {
  background: transparent;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.tree-node-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tree-node-icon {
  color: #409eff;
  font-size: 14px;
}

/* 右侧内容面板 */
.right-content-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.field-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.field-item:last-child {
  border-bottom: none;
}
/* 导出设置弹窗 */
.export-dialog-content {
  padding: 20px;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .device-report {
    padding: 16px;
  }
  .filter-form {
    flex-direction: column;
  }
  .date-picker,
  .filter-input,
  .filter-select {
    width: 100%;
  }
  .action-buttons {
    flex-direction: column;
  }
  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
</style>

/* Tab容器 */
.tab-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  overflow: hidden;
}
.custom-tabs {
  padding: 0 20px;
}
.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

/* 筛选容器 */
.filter-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  padding: 16px 20px;
}
.filter-form {
  margin: 0;
}
.date-picker {
  width: 250px;
}
.filter-input {
  width: 150px;
}
.filter-select {
  width: 120px;
}

/* 操作按钮区 */
.action-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  padding: 16px 20px;
}
.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.action-buttons .el-button {
  border-radius: 6px;
  font-weight: 500;
}

/* 表格容器 */
.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #fafafa;
  border-bottom: 1px solid #e4e7ed;
}
.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-title i {
  color: #3498db;
  font-size: 18px;
}
.table-info {
  color: #909399;
  font-size: 14px;
}

/* 统一表格行背景 */
.custom-table >>> .el-table__body tr {
  background-color: #fff !important;
}

.custom-table >>> .el-table__body tr:hover {
  background-color: #f5f7fa !important;
}

.custom-table >>> .el-table__body tr td {
  color: #303133 !important;
  background-color: #fff !important;
}

.custom-table >>> .el-table__body tr:hover td {
  background-color: #f5f7fa !important;
}

/* mt-4 样式 */
.mt-4 {
  margin-top: 16px;
  padding: 0 20px 20px;
}

/* 数值样式 */
.energy-value {
  color: #3498db;
  font-weight: 600;
}
.usage-value {
  color: #e74c3c;
  font-weight: 600;
}
.total-value {
  color: #2c3e50;
  font-weight: 600;
}
.peak-value {
  color: #e67e22;
  font-weight: 600;
}
.valley-value {
  color: #27ae60;
  font-weight: 600;
}
.flat-value {
  color: #9b59b6;
  font-weight: 600;
}

/* 字段设置弹窗 */
.field-dialog-content {
  padding: 20px;
}
.field-tips {
  margin-bottom: 20px;
}
.field-list {
  max-height: 400px;
  overflow-y: auto;
}
.field-item {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  cursor: move;
}
.field-item:hover {
  background-color: #f5f7fa;
}

/* 导出设置弹窗 */
.export-dialog-content {
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .left-tree-panel {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .device-report {
    flex-direction: column;
    height: auto;
    padding: 16px;
  }
  
  .left-tree-panel {
    width: 100%;
    margin-right: 0;
    margin-bottom: 16px;
    height: 300px;
  }
  
  .filter-container {
    padding: 12px;
  }
  
  .action-container {
    padding: 12px;
  }
  
  .action-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .table-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

